<template>
	<view class="login">
		
		<view class="copyRight">
			
			<view class="logo u-f-ajc">
				<u--image showLoading src="/static/img/logo.png" width="156rpx" height="156rpx"></u--image>
			</view>
			
			<view class="wecomeTis u-f-ajc">
				<text>欢迎来到Fox笔记</text>
			</view>
			
		</view>
		
		
		<!-- 表单 -->
		<view class="formLogin">
			
			<view class="title">
				<text>密码登录</text>
			</view>
			
			<view class="list">
				<u--input
				    placeholder="手机号/用户名/邮箱"
				    border="none"
					clearable
				    v-model="username"
				  ></u--input>
			</view>
			  
			<view class="list" :class="{last:true}">
				<u--input
				    placeholder="输入密码"
				    border="none"
					password
					clearable
				    v-model="password"
				  ></u--input>
			</view>
			
			<!-- <view class="getpsw">
				<text>忘记密码</text>
			</view> -->
			
			
			<view class="submit">
				<u-button text="登录" 
				:loading="loading" 
				:disabled="disabled" 
				shape="circle" 
				type="primary"
				@click="submitLogin"
				></u-button>
			</view>
			
		</view>
		
		<!-- 第三方登录 -->
		<view class="ouathLogin" v-if="Object.keys(ouathLogin).length">
			<!-- 标题 -->
			<view class="title u-f-ajc">
				<text>第三方登录</text>
			</view>
			<!-- 第三方登录列表 -->
			<view class="listData u-f-ajc">
				<view class="list u-f-ajc" 
				v-for="(item, key, index) in ouathLogin"
				:key="index"
				v-if="item.status"
				@click="ouathLoginChange(key)"
				>
					<u-icon :name="item.icon" color="#cacad6" size="58rpx"></u-icon>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { postLogin, WeChatAppLogin } from '@/http/api'
	
	export default {
		data() {
			return {
				username:'',
				password:'',
				disabled:true,
				loading:false,
				ouathLogin:{
					// #ifdef MP-WEIXIN
					WeChatApp:{
						icon:'weixin-fill',
						status:true
					},
					// #endif 
				}
			}
		},
		watch:{
			username(){
				this.checkForm()
			},
			password(){
				this.checkForm()
			}
		},
		mounted() {
			if(this.appConfig.wxLogin=='0')this.ouathLogin.WeChatApp.status = false
		},
		methods: {
			// 检查表单
			checkForm(){
				if(this.username.length > 5 && this.password.length > 5 ){
					this.disabled = false
				}else{
					this.disabled = true
				}
			},
			// 第三方登录点击监听
			async ouathLoginChange(name){
				switch (name){
					// 如果是小程序
					case 'WeChatApp':
						// 调用小程序登录
						await this.WeChatAppLogin()
						break;
				}
			},
			// 微信小程序登录
			async WeChatAppLogin(){
				uni.showLoading({title:'登录中...',mask:true})
				let loginReslut = await uni.login({provider: 'weixin'})
				let code = loginReslut[1].code;
				if(!code)return uni.showToast({title: 'Code获取失败'});
				let res = await WeChatAppLogin({code:code});
				uni.hideLoading()
				// 检查登录结果
				if(res.code){
					let info = res.data.userinfo;
					this.setUserInfo(info)
					// 判断用户名和用户昵称是否相同
					if(info.nickname == '新用户'){
						// 名字相同 跳转至完善信息
						uni.redirectTo({
							url:'/pages/home/wanshan'
						})
					}else{
						uni.switchTab({
							url:'/pages/home/home'
						})
					}
				}
			},
			// 请求登录
			async submitLogin(){
				this.loading = true
				let res = await postLogin({account:this.username,password:this.password});
				
				if(res.code){
					let info = res.data.userinfo;
					
					this.setUserInfo(info)
					// 判断用户名和用户昵称是否相同
					if(info.username == info.nickname){
						// 名字相同 跳转至完善信息
						uni.redirectTo({
							url:'/pages/home/wanshan'
						})
					}else{
						uni.switchTab({
							url:'/pages/home/home'
						})
					}
					
				}else{
					uni.showToast({
						title:res.msg,
						icon:'error'
					})
				}
				this.loading = false
			}
		}
	}
</script>

<style>
page{
	background-color: #9293AD;
}
</style>

<style scoped lang="scss">
.login{
	min-height: 100vh;
	background: url('')no-repeat 240rpx -78rpx;
	background-size: 750rpx 750rpx;
	
	.copyRight{
		padding-top: 80rpx;
		.wecomeTis{
			margin-top: 10rpx;
			color: white;
			font-size: 40rpx;
		}
	}
	
	.formLogin{
		background-color: white;
		border-radius: 20rpx;
		min-height: 400rpx;
		margin: 80rpx 50rpx;
		padding: 10rpx 50rpx;
		.title{
			margin-top: 20rpx;
			font-size: 40rpx;
			color: #292934;
		}
		.list{
			border-bottom: 1px solid #efeff3;
			padding: 15rpx 0;
			margin: 40rpx 0;
		}
		.last{
			margin-bottom: 20rpx;
		}
		.getpsw{
			text-align: right;
			color: #D1D1D6;
			font-size: 26rpx;
		}
		.submit{
			margin: 60rpx 0;
		}
	}
	
	.ouathLogin{
		.title{
			color: white;
			font-size: 25rpx;
		}
		.listData{
			margin-top: 40rpx;
			.list{
				width: 100rpx;
				height: 100rpx;
				border-radius: 100rpx;
				background-color: white;
			}
		}
	}
}
</style>
